<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./com/lee.css">
</head>
<body>
    <div id="box" v-cloak>
        <!-- logo -->
        <div class="header">
            <img src="https://ccdn.goodq.top/caches/569b046fc16663a994ea33d5a2a60b54/aHR0cHM6Ly81NGQ0YTQ2MjlmYjZiLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTUvMDIvYmMzOGYxYzkzOGY5OGM3NjExYzEzMzc2OGJhN2M3OWEucG5n.png" alt="">
        </div>
        <!-- nav -->
        <div class="nav">
            <l-nav :nav="nav_arr"></l-nav>
        </div>
         <!--轮播图-->
        <div>
            <l-slide :img_arr="img_arr"></l-slide>
        </div>
        <!-- 关于我们 -->
        <div class="no_g">
            <h1>关于我们</h1>
            <p>起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。在这里，您仅需花上10分钟便可以完成一个H5响应式网站，您会发现完全不需要编写一行代码，这就是起飞页自助建站的神奇之处。起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。在这里，您仅需花上10分钟便可以完成一个H5响应式网站，您会发现完全不需要编写一行代码，这就是起飞页自助建站的神奇之处。</p>
            <div>
                <img src="https://ccdn.goodq.top/caches/569b046fc16663a994ea33d5a2a60b54/aHR0cHM6Ly81NGQ0YTQ2MjlmYjZiLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvQy5wbmc_p_p100_p_3D.png" alt="">
            </div>
        </div>
        <!-- 悬浮效果 -->
        <div class="no_x">
            <div class="no_xx" style="padding: 50px;">
                <lee  v-for="i in arr" :a="i"  style="width: 300px;margin: 25px;float: left;"></lee>
            </div>
        </div>
        <!-- 内容 -->
        <div class="content">
            <h2>我们的理念</h2>
            <div class="content-t">
                <div class="content-t-l">
                    <p>
                        起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。在这里，您仅需花上10分钟便可以完成一个H5响应式网站，您会发现完全不需要编写一行代码，这就是起飞页自助建站的神奇之处。</p>
                    <p>起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。在这里，您仅需花上10分钟便可以完成一个H5响应式网站，您会发现完全不需要编写一行代码，这就是起飞页自助建站的神奇之处。起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。在这里，您仅需花上10分钟便可以完成一个H5响应式网站，您会发现完全不需要编写一行代码，这就是起飞页自助建站的神奇之处。</p>
                </div>
                <div class="content-t-r">
                    <div>
                        <img src="https://ccdn.goodq.top/caches/569b046fc16663a994ea33d5a2a60b54/aHR0cHM6Ly81NGQ0YTQ2MjlmYjZiLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTgvMTAvYmMxNDUwMzFiY2U5ZmVmZGU3YWU1ODI2MmM5NThlYTkuanBn.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="content-c">
                <div class="content-c-l">
                    <img src="https://ccdn.goodq.top/caches/569b046fc16663a994ea33d5a2a60b54/aHR0cHM6Ly81NGQ0YTQ2MjlmYjZiLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTUvMDYvODg2MDM3MGFmNzZjMDFkZTUzMzdkNDYyNmMyNjc4ZjQuanBn.jpg" alt="">
                </div>
                <div class="content-c-r">
                    <h6>旅行篇</h6>
                    <h3>旅行和生活的记录</h3>
                    <p>起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。在这里，您仅需花上10分钟便可以完成一个H5响应式网站，您会发现完全不需要编写一行代码，这就是起飞页自助建站的神奇之处。起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。</p>
                    <div>了解更多</div>
                </div>
            </div>
            <div class="content-cc">
                <div class="content-cc-r">
                    <h6>艺术片</h6>
                    <h3>最美的是生活本身</h3>
                    <p>起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。在这里，您仅需花上10分钟便可以完成一个H5响应式网站，您会发现完全不需要编写一行代码，这就是起飞页自助建站的神奇之处。起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。</p>
                    <div>了解更多</div>
                </div>
                <div class="content-cc-l">
                    <img src="https://ccdn.goodq.top/caches/569b046fc16663a994ea33d5a2a60b54/aHR0cHM6Ly81NGQ0YTQ2MjlmYjZiLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTUvMDYvMjk5ZmQ5ZDZlYTdhY2QyOWM3OTUxYTNjZWRjMzJiNDIuanBn.jpg" alt="">
                </div>
            </div>

            <div class="content-c">
                <div class="content-c-l">
                    <img src="https://ccdn.goodq.top/caches/569b046fc16663a994ea33d5a2a60b54/aHR0cHM6Ly81NGQ0YTQ2MjlmYjZiLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDcvOGRlYzIwMzM4MjFjZTAwYTkxMGFjMGI5YzhkM2Y1OTAuanBn.jpg" alt="">
                </div>
                <div class="content-c-r">
                    <h6>艺术片</h6>
                    <h3>最美的是生活本身</h3>
                    <p>起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。在这里，您仅需花上10分钟便可以完成一个H5响应式网站，您会发现完全不需要编写一行代码，这就是起飞页自助建站的神奇之处。起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。</p>
                    <div>了解更多</div>
                </div>
            </div>
            <div class="content-b">
                <h2>博客</h2>
                <p>博客
                    起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。在这里，您仅需花上10分钟便可以完成一个H5响应式网站，您会发现完全不需要编写一行代码，这就是起飞页自助建站的神奇之处。起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。在这里，您仅需花上10分钟便可以完成一个H5响应式网站，您会发现完全不需要编写一行代码，这就是起飞页自助建站的神奇之处。
                   </p>
            </div>
            <div>
				<l-san>
					<div slot='on1' style="width: 1180px;margin: auto;" >
						<div style="position: relative;">
							<div class="aaa">
								<div style="padding: 20px 90px 0 0;">
									<h4 style="color: #444444;line-height: 35px;">东欧最浪漫的城市-布达佩斯</h4>
									<p style="color: #999999">从前在多瑙河两岸面对面坐落着两座城市，一座叫布达，另一座叫佩斯，布达在西，佩斯在东。</p></div>
								
							</div>
							<div style="position: absolute;left: 435px;top: 20px;">
								<p style="color: #bdbdbd;font-size: 36px;">06_03</p>
								<span style="color: #bdbdbd;font-size: 12px;padding-left: 2px;">2017</span>
							</div>
						</div>
					</div>
				</l-san>	
				<l-san>
					<div slot='on1' style="width: 1180px;margin: auto;overflow: hidden;" >
						<div style="position: relative;float: right;">
							<div style="position: absolute;left: -60px;top: 20px;">
								<p style="color: #bdbdbd;font-size: 36px;">06_03</p>
								<span style="color: #bdbdbd;font-size: 12px;padding-left: 2px;">2017</span>
							</div>
							<div class="aaa" style="text-align: left;">
								<div style="padding: 20px 0px 0 90px;">
									<h4 style="color: #444444;line-height: 35px;">东欧最浪漫的城市-布达佩斯</h4>
									<p style="color: #999999">从前在多瑙河两岸面对面坐落着两座城市，一座叫布达，另一座叫佩斯，布达在西，佩斯在东。</p></div>
								
							</div>	
						</div>
					</div>
				</l-san>
				<l-san>
					<div slot='on1' style="width: 1180px;margin: auto;" >
						<div style="position: relative;">
							<div class="aaa">
								<div style="padding: 20px 90px 0 0;">
									<h4 style="color: #444444;line-height: 35px;">东欧最浪漫的城市-布达佩斯</h4>
									<p style="color: #999999">从前在多瑙河两岸面对面坐落着两座城市，一座叫布达，另一座叫佩斯，布达在西，佩斯在东。</p></div>
								
							</div>
							<div style="position: absolute;left: 435px;top: 20px;">
								<p style="color: #bdbdbd;font-size: 36px;">06_03</p>
								<span style="color: #bdbdbd;font-size: 12px;padding-left: 2px;">2017</span>
							</div>
						</div>
					</div>
				</l-san>
			</div>
        </div>
        <!-- 页尾 -->
        <div class="footer">
            <div>
                <img src="https://ccdn.goodq.top/caches/569b046fc16663a994ea33d5a2a60b54/aHR0cHM6Ly81NGQ0YTQ2MjlmYjZiLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvMDRmOTgyOTk1ZTlhMDNhMTZkNzc3Yjk5ZTU0YTg1YWQtMjEyeDkwLnBuZw_p_p100_p_3D_p_p100_p_3D.png" alt="">
            </div>
            <p>Copyright © 2017 个人摄影网站. All rights reserved.</p>
        </div>
    </div>
</body>
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script src="./js/vue.js"></script>
<script src="./com/lee.js"></script>
<script>
    new Vue({
        el:"#box",
        data:{
            // 导航
            nav_arr:[
                {title:'首页',url:'#'},
                {title:'关于我们',url:'#no1'},
                {title:'我们的理念',url:'#no2'},
                {title:'旅行篇',url:'#no3'},
                {title:'艺术篇',url:'#no4'},
                {title:'博客',url:'#no5'},
             ],
            //  轮播图
             img_arr:[
			   {href:"#",url:"./images/1.jpg"},
			   {href:"#",url:"./images/2.jpg"},
			   {href:"#",url:"./images/3.jpg"},
			   {href:"#",url:"./images/4.jpg"},
			   {href:"#",url:"./images/5.jpg"}
            ],
            // 悬浮效果
            arr:[
			{
				title:'岁月',
				content:'哪知岁月总是催人老,等到知时已迟了',
				img:'https://ccdn.goodq.top/caches/569b046fc16663a994ea33d5a2a60b54/aHR0cDovLzU0ZDRhNDYyOWZiNmIudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNS8wNi9kNWQ0Y2M3YjA5ZDE4NDM1MTdhY2M5MzYxZjhmNjY1ZS00NTB4NDUwLmpwZw_p_p100_p_3D_p_p100_p_3D.jpg'
			},
			{
				title:'风景',
				content:'再美的风景,也需要欣赏他的人',
				img:'https://ccdn.goodq.top/caches/569b046fc16663a994ea33d5a2a60b54/aHR0cDovLzU0ZDRhNDYyOWZiNmIudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNS8wNi9jOTUxMjU2NWVmNjE5NGNhNjY0ZGM0MWVjMGRlN2E1My00NTB4NDUwLmpwZw_p_p100_p_3D_p_p100_p_3D.jpg'
			},
			{
				title:'旅游日记',
				content:'旅行重要的不是终点,而是过程',
				img:'https://ccdn.goodq.top/caches/569b046fc16663a994ea33d5a2a60b54/aHR0cDovLzU0ZDRhNDYyOWZiNmIudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNS8wNi9iYmQ5N2IwMGM1Mzk4MDFlMzIzMTdhYjU1MDg2N2VjNC00NTB4NDUwLmpwZw_p_p100_p_3D_p_p100_p_3D.jpg'
            },
            {
				title:'相爱的人',
				content:'犹如黑暗中的烛光,照亮了整个人类的历史',
				img:'https://ccdn.goodq.top/caches/569b046fc16663a994ea33d5a2a60b54/aHR0cHM6Ly81NGQ0YTQ2MjlmYjZiLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTUvMDYvNTI4OTUzNzI3ZWYzYTRlMWM0NDFjNjA3ODUzNGMzOWItNDUweDQ1MC5qcGc_p_p100_p_3D.jpg'
            },
            {
				title:'建筑',
				content:'不同的是外形,相同的是内在',
				img:'https://ccdn.goodq.top/caches/569b046fc16663a994ea33d5a2a60b54/aHR0cHM6Ly81NGQ0YTQ2MjlmYjZiLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTUvMDYvNWRiNThlN2IyMWI5MDY0Y2E1YWY0OWVmZTdiN2E4YjItNDUweDQ1MC5qcGc_p_p100_p_3D.jpg'
            },
            {
				title:'神奇的自然',
				content:'有一种神奇叫做孤独的孕育',
				img:'https://ccdn.goodq.top/caches/569b046fc16663a994ea33d5a2a60b54/aHR0cHM6Ly81NGQ0YTQ2MjlmYjZiLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDYvMjA2YjI3ODE2Yjc0NmM0NzIzYTRkM2MyN2YxNjA4OWEtNDUweDQ1MC5qcGc_p_p100_p_3D.jpg'
			}
			]
        }   
    })
</script>
</html>